<template lang="pug">
  div
    div(:class="{'text-right':config&&config.position==='right'}")
      el-checkbox(:value="value" @input="$emit('input',$event)" :disabled="readonly" :style="'margin-right:4px;opacity:'+(checkboxShow?'1':'0')")
      el-button.ml-2(:disabled="readonly" @click="buttonClick" type="text") {{checkboxShow?'高级':'返回'}}
    div(style="height:100px" v-if="!checkboxShow")
      monaco-editor(:value="value" @input="$emit('input',$event)" :config="config" :readonly="readonly" :isDetailsPage="isDetailsPage")
</template>
<script>
import MonacoEditor from '../monacoEditor'

export default {
  props: ['config', 'value', 'readonly', 'isDetailsPage', 'size'],
  components: { MonacoEditor },
  data() {
    return {
      checkboxShow: true
    }
  },

  methods: {
    buttonClick() {
      if (!this.checkboxShow) {
        this.$confirm('此操作会将您填写的高级表达式内容删除，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.checkboxShow = !this.checkboxShow
          this.$emit('input', true)
        }).catch(() => {

        })
      } else {
        this.checkboxShow = !this.checkboxShow
      }
    }
  },
  created() {
    this.config.height = '100px'
    if (typeof this.value === 'boolean') {
      this.checkboxShow = true
    } else {
      this.checkboxShow = false
    }
  }
}
</script>
<style lang="scss" scoped>

</style>

